import React from 'react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
    BrowserRouter,
    Routes,
    Route,
} from 'react-router-dom';
import {render} from "react-dom";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";
import Invoice from "./routes/invoice";
import SentInvoices from './routes/sentInvoices'

const rootElement = document.getElementById('root');
render(
    <React.StrictMode>
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<App/>}>
                    <Route path='expenses' element={<Expenses/>}/>
                    <Route path='invoices' element={<Invoices/>}>
                        {/* 索引路由 是默认子路由 */}
                        <Route
                            index
                            element={
                                <main style={{padding: "1rem"}}>
                                    <p>Select an invoice</p>
                                </main>
                            }
                        >
                        </Route>
                        <Route path=':invoiceId' element={<Invoice/>}/>
                        <Route path='sent' element={<SentInvoices/>}/>
                    </Route>

                    <Route
                        path='*'
                        element={
                            <main style={{padding: "1rem"}}>
                                <p>泥嚎，这里啥都没有</p>
                            </main>
                        }
                    >
                    </Route>
                </Route>
            </Routes>
        </BrowserRouter>
    </React.StrictMode>,
    rootElement
);

reportWebVitals();
